{% extends 'base.html' %}

{% block content %}
  <div class="p-4">
    <!-- 数据统计卡片 -->
    <div class="row mb-4">
      <div class="col-md-3 mb-3">
        <div class="stat-card bg-primary text-white p-4 rounded-3">
          <div class="d-flex justify-content-between">
            <div>
              <p class="mb-1">总用户</p>
              <h3 class="mb-0">2,541</h3>
            </div>
            <i class="fa fa-users fa-2x"></i>
          </div>
          <div class="mt-2 text-sm">
            <span class="text-success"><i class="fa fa-arrow-up"></i> 5.2%</span> 较上月
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <div class="stat-card bg-success text-white p-4 rounded-3">
          <div class="d-flex justify-content-between">
            <div>
              <p class="mb-1">总订单</p>
              <h3 class="mb-0">1,892</h3>
            </div>
            <i class="fa fa-file-text-o fa-2x"></i>
          </div>
          <div class="mt-2 text-sm">
            <span class="text-white"><i class="fa fa-arrow-up"></i> 12.8%</span> 较上月
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <div class="stat-card bg-warning text-white p-4 rounded-3">
          <div class="d-flex justify-content-between">
            <div>
              <p class="mb-1">总收入</p>
              <h3 class="mb-0">¥35,621</h3>
            </div>
            <i class="fa fa-money fa-2x"></i>
          </div>
          <div class="mt-2 text-sm">
            <span class="text-white"><i class="fa fa-arrow-up"></i> 8.5%</span> 较上月
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <div class="stat-card bg-info text-white p-4 rounded-3">
          <div class="d-flex justify-content-between">
            <div>
              <p class="mb-1">转化率</p>
              <h3 class="mb-0">12.5%</h3>
            </div>
            <i class="fa fa-exchange fa-2x"></i>
          </div>
          <div class="mt-2 text-sm">
            <span class="text-danger"><i class="fa fa-arrow-down"></i> 1.2%</span> 较上月
          </div>
        </div>
      </div>
    </div>

    <!-- 上传区域和表格 -->
    <div class="row">
      <!-- 左侧上传区域 -->
      <div class="col-md-4 mb-4">
        <div class="card p-4 h-100">
          <h5 class="card-title mb-4">文件上传</h5>

          <!-- 单文件上传 -->
          <div class="mb-4">
            <label class="form-label">上传用户头像</label>
            <div class="upload-btn-wrapper">
              <button class="btn btn-outline-primary w-100">
                <i class="fa fa-upload me-2"></i>选择图片
              </button>
              <input type="file" accept="image/*" id="avatarUpload"/>
            </div>
            <div class="mt-3" id="avatarPreview" style="display: none;">
              <img src="" alt="预览图" class="img-thumbnail" width="100%">
            </div>
          </div>

          <!-- 多文件上传 -->
          <div class="mb-4">
            <label class="form-label">批量上传产品图片</label>
            <div class="upload-btn-wrapper">
              <button class="btn btn-outline-secondary w-100">
                <i class="fa fa-files-o me-2"></i>选择多个文件
              </button>
              <input type="file" accept="image/*" multiple id="productUpload"/>
            </div>
            <div class="mt-3" id="fileList"></div>
          </div>

          <!-- 上传按钮 -->
          <button class="btn btn-success w-100" id="submitUpload">
            <i class="fa fa-check me-2"></i>确认上传
          </button>
        </div>
      </div>

      <!-- 右侧数据表格 -->
      <div class="col-md-8">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">最近订单</h5>
            <button class="btn btn-sm btn-outline-primary">
              <i class="fa fa-download me-1"></i>导出数据
            </button>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                <tr>
                  <th>订单编号</th>
                  <th>用户</th>
                  <th>金额</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>ORD-2023-001</td>
                  <td>张三</td>
                  <td>¥299.00</td>
                  <td><span class="badge bg-success">已完成</span></td>
                  <td>
                    <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>ORD-2023-002</td>
                  <td>李四</td>
                  <td>¥599.00</td>
                  <td><span class="badge bg-warning">处理中</span></td>
                  <td>
                    <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>ORD-2023-003</td>
                  <td>王五</td>
                  <td>¥1299.00</td>
                  <td><span class="badge bg-danger">已取消</span></td>
                  <td>
                    <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>ORD-2023-004</td>
                  <td>赵六</td>
                  <td>¥89.00</td>
                  <td><span class="badge bg-primary">已付款</span></td>
                  <td>
                    <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>

            <!-- 分页 -->
            <nav class="mt-3">
              <ul class="pagination justify-content-center">
                <li class="page-item disabled">
                  <a class="page-link" href="#" tabindex="-1">上一页</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">下一页</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}